<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/jquery.dad.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.dad.js"></script>
<style>

    .company {
        width: 1566px;
        margin: 0 auto;
        background-color: #FFFFFF;
        margin-top: 20px;
        border-radius: 3px;
    }

    .btn i {
        vertical-align: middle;
        margin-right: 10px;
    }

    .photo {
        margin-left: 20px;
    }

    .boxPhoto {
        width: 180px;
        height: 230px;
        border: 1px solid #E3E3E3;
        position: relative;
        top: 0;
        margin-right: 20px;
        margin-bottom: 16px;

    }

    .boxPhoto img {
        margin-left: -10px;
    }

    .p {
        height: 45px;
        width: 160px;
        font-size: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .text {
        /*盒模型*/
        display: -webkit-box;
        display: -moz-box;
        display: box;
        /**/
        margin: auto;
        margin-top: 30px;
        /*border: 10px solid #7F8C8D;*/

        width: 100%;
        height: 0;
        /*纵向*/
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.60);
        font-size: 12px;
        color: #fff;
    }

    .text div {
        /*占有比例*/
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        text-align: center;
        line-height: 20px;
        color: #fff;
    }


    .text button:nth-child(1) {
        margin-top: 30px;
        background-color: white;
        width: 52px;
        height: 20px;
        /*margin-left: 10px;*/
        border-style: none;
        color: #1B55A6;
        border-radius: 2px;


    }

    .text button:nth-child(2) {
        margin-left: 20px;
        color: white;
        width: 52px;
        height: 20px;
        border: 1px solid white;
        background-color: transparent;
        border-radius: 2px;

    }
</style>
<body>
<div class="company">
<div class="photo" id="cpdiv">
<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>


<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>


<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

<div class="boxPhoto col-sm-4">
    <div class="draggable"><img
            src="http://ebaizhan.oss-cn-beijing.aliyuncs.com/productImg/ecff50e8-cae6-4674-a4f9-b4058043a6e5.png?Expires=1884222413&amp;OSSAccessKeyId=LTAIBzpfy3wAA7IF&amp;Signature=aKNvn5cA0NFyY4DDbsGgCJyKZNM%3D"
            style="padding-left:5px;padding-right: 5px;padding-top: 5px;width: 170px;">
        <p class="p" style="margin-top:10px;width: 150px;">asdasd22</p>
        <p style="margin-top: 10px;color: red;padding-left: px;padding-right: 5px;">￥11.00<span
                style="text-decoration: line-through;font-size: 12px;color: #E3E3E3"
                class="float-right">￥11.00</span></p></div>
    <div class="text" style="height: 0px;">
        <div class="draggable" style="width: 180px;height: 60px"></div>
        <div class="bt">
            <button type="button"
                    onclick="editProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">编辑
            </button>
            <button type="button"
                    onclick="deleteProduct('19adaf8b954c4ea2819f99e61f71a224','d28aff59b4bd486084e104fd2b5a3bf7')">
                删除
            </button>
        </div>
        <div class="draggable" style="height: 60px;"></div>
    </div>
</div>

</div>
</div>
</body>
<script>
    $(function () {
        donghua();
        $('#cpdiv').dad({
            draggable: '.draggable',
            placeholder: '请拖拽',
            callback: function () {
            }
        });
    });

    function donghua() {
        //去除牛
        $('.boxPhoto').hover(function () {
            $('.text', this).stop().animate({
                //$('.text',this)指鼠标悬停的那个li的text,stop()解决鼠标悬停离开后，遮罩效果会自动多次出现，
                //保证图片的遮罩效果只有在鼠标悬停的对象上才出现，而停止其他
                height: '230px'
            });
        }, function () {
            $('.text', this).stop().animate({
                height: '0'
            });
        });
    }
</script>
</html>